<template>
  <div id="personal">
    <nav-bar class="nav" title = "个人中心"/>
    <user-info></user-info>
    <relative-info></relative-info>
    <list-data :listData = 'orderList'></list-data>
  </div>
</template>

<script>
import UserInfo from './children/userInfo'
import RelativeInfo from './children/accountinfo'
import ListData from './children/someList'
import NavBar from '../../components/Header/Header'
export default {
  name: 'Personal',
  data () {
    return {
      orderList: [
        { icon: 'message.svg', info: '我的消息' },
        { icon: 'pointer.svg', info: '积分商城' },
        { icon: 'vip.svg', info: '会员卡' },
        { icon: 'cart.svg', info: '我的购物车' },
        { icon: 'shopping.svg', info: '下载购物APP' }
      ]
    }
  },
  components: {
    NavBar,
    UserInfo,
    RelativeInfo,
    ListData
  }
}
</script>

<style scoped>
  #profile {
    background: #f2f2f2;
  }
  .nav {
    background-color: var(--color-tint);
    color: #fff;
  }
</style>
